<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom增删改</title>
    <style>
        .table {
            border: black solid 1px;
            width: 500px;
            text-align: center;
        }

        .box1 {
            width: 500px;
            margin: auto
        }

        .box2 {
            width: 500px;
            margin: 50px auto;
        }

        .table2 {
            width: 500px;
        }

        .r {
            text-align: right;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var index = 1;
            var submit = document.getElementById("add");
            submit.onclick = function () {
                let name = document.getElementById("name").value;
                let age = document.getElementById("age").value;
                let genders = document.getElementsByName("gender");
                let gender = 0;
                let tableObj = document.getElementById("table");
                genders.forEach(function (value, index, obj) {
                    if (obj[index].checked) gender = obj[index].value;
                });
                let tr = document.createElement("tr");
                tr.id = index;
                tr.innerHTML = "<td>" + name + "</td>" +
                    "<td>" + age + "</td>" +
                    "<td>" + gender + "</td>" +
                    "<td><a href='javascript:;'>delete</td>";
                tableObj.appendChild(tr);
                index++;
                let as = document.getElementsByTagName('a');
                for (let i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        as[i].parentNode.parentNode.parentNode.removeChild(as[i].parentNode.parentNode);
                    }
                }
            }

        }
    </script>
</head>
<body>
<div class="box1">
    <table class="table">
        <tbody id="table">
        <tr>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
            <th>operation</th>
        </tr>
        </tbody>
    </table>
</div>
<div class="box2">
    <table class="table2">
        <tr>
            <td class="r"><span>name:</span></td>
            <td><input type="text" name="name" value="" id="name"></td>
        </tr>
        <tr>
            <td class="r"><span>age:</span></td>
            <td><input type="text" name="age" value="" id="age"></td>
        </tr>
        <tr>
            <td class="r"><span>gender:</span></td>
            <td><input type="radio" name="gender" value="0">male<input type="radio" name="gender" value="1">female
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="r"><input id="add" type="button" name="submit" value="submit"></td>
        </tr>
    </table>
</div>
</body>
</html>